<template>
	<div class="training_resources_list wrapper" v-loading="loading">
		<xs-course-label class="hidden-xs-only" v-model="activeName"></xs-course-label>
		<sm-course-label class="hidden-sm-and-up" v-model="activeName"></sm-course-label>
		<div class="content">
			<template v-if="tableData.length === 0">
				<el-empty :image-size="100" :image="emptyImage" description="暂无课程"></el-empty>
			</template>
			<template v-else>
				<template v-for="(item, index) in tableData">
					<course-item :data="item" @click.native="handleLookCourse(item.id)"></course-item>
				</template>
			</template>
		</div>
		<div class="page" v-if="dataCount > 0">
			<sw-pagination v-bind="pageLayout" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()" />
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import xsCourseLabel from './xsLabels';
import smCourseLabel from './smLabels';
import listMixins from '@/mixins/listMixins';
import courseItem from '@/views/common/courseItem';
import { queryCourseListData } from '@/api/openApi';
export default {
	mixins: [listMixins],
	components: { xsCourseLabel, smCourseLabel, courseItem },
	data() {
		return {
			activeName: '0',
			queryData: { page: 1, limit: 12 },
			emptyImage: require('@/assets/img/empty.svg')
		};
	},
	computed: {
		...mapGetters(['courseLabel']),
		listFunction() {
			return eval(queryCourseListData);
		},
		requestParams() {
			let labelValue = this.activeName === '0' ? '' : this.activeName;
			let obj = { ...this.queryData, courseType: 6, auditStatus: 2 };
			return { ...obj, labelValue, status: 1 };
		},
		pageLayout() {
			let pageSizes = [12, 24, 48, 96];
			if (this.isMobile) {
				return { pageSizes, isSizes: false, isJumper: false, layout: 'prev, pager, next' };
			} else {
				return { pageSizes, isSizes: true, isJumper: true, layout: '' };
			}
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.queryData.page = 1;
				this.queryTableData();
			},
			immediate: true
		}
	},
	methods: {
		//查看课程详情
		handleLookCourse(id) {
			this.$router.push(`/front/trainingResources/${id}`);
		}
	}
};
</script>

<style lang="scss" scoped>
.training_resources_list::v-deep {
	flex: 1;
	display: flex;
	flex-direction: column;
	.el-card {
		margin-top: 0;
	}
	.content {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 10px;
		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 14px;
		}
		@media (min-width: 992px) {
			grid-template-columns: repeat(3, 1fr);
			gap: 18px;
		}
		@media (min-width: 1200px) {
			grid-template-columns: repeat(4, 1fr);
			gap: 22px;
		}
		&:has(.el-empty) {
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0.5;
			flex: 1;
		}
	}
	.page {
		margin: 24px 0 14px;
	}
	.sw-pagination {
		justify-content: center;
	}
	.el-pagination__total {
		flex: none;
	}
}
</style>
